<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片综合性切换(自动生成小导航)效果（水平，垂直，渐隐）插件-Jquery插件库-林氏智造</title>
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<link href="css/ui.css" rel="stylesheet" />
		<link href="css/shCoreDefault.css" rel="stylesheet" />
		<script type="text/javascript" src="js/jquery-1.10.0.min.js"></script>
		<script type="text/javascript" src="js/shCore.js"></script>
		<script type="text/javascript" src="js/shBrushCSharp.js"></script>
		<script type="text/javascript">SyntaxHighlighter.all();</script>
		<script type="text/javascript" src="js/jquery.easing.min.js"></script>
		<script type="text/javascript" src="js/lin_picSwitch.1.0.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#demo1").lin_picSwitch({btnPre:".lin_btnPre",btnNext:".lin_btnNext"});
				$("#demo2").lin_picSwitch({effect:'scrollY',autoPlayTimer:5000});
				$("#demo3").lin_picSwitch({effect:'fade',autoPlayTimer:6000});	
			});
		</script>
	</head>
	<body id="main">
		
		<div class="slidebar">
			<a href="http://www.0773linji.com" title="林氏智造" class="logo">林氏智造</a>
			<div class="slidebar_title">Jquery<span class="ver">插件库</span></div>
            <iframe src="../menu.html" frameborder="0"></iframe>
		</div>
		
		<div class="content">
			
			<div class="caption"><h2>图片综合性切换插件</h2><span class="file">Define in : lin_picSwitch.1.0.js</span></div>
			
			<div class="mod_desc">
        			<p>图片切换其实就要tab切换在升级版，获取到当前需要处理元素的下标，然后做出相应的动画特效即可。注意判断当前运动是否结束，不然一直点下一张按钮动画会无限排进队列。</p>
    			</div>
    			
    			<h3 class="title_lv2">
    				$("<span>target</span>").lin_picSwitch([ <em>options</em> ]);
    			</h3>
    			
    			<dl class="deps">
        			<dt>依赖</dt>
        			<dd>JS : jquery-1.10.0.min.js,jquery.easing.min.js</dd>
        			<dd>浏览器 : ie7+</dd>
    			</dl>
    			
    			<div class="params_box">
				<h5>参数</h5>
				<ul class="params_list">
					<li>
						<dl>
							<dt>target</dt>
							<dd>String</dd>
						</dl>
						<div class="params_desc">
							<span class="type required">必需</span>
							<p>target DOM元素ID或者DOM元素class,对匹配元素进行插件绑定。</p>
						</div>
					</li>
					<li>
						<dl>
							<dt>options</dt>
							<dd>Object</dd>
						</dl>
						<div class="params_desc">
							<span class="type optional">可选</span>
							<p>多选形式的可配置参数。</p>
						</div>
					</li>
				</ul>
			</div>
			
			<div class="article_box">
        			<p>下表列出了options参数介绍。</p>
    			</div>
    			
    			<table class="props_tb">
        <colgroup>
            <col style="width:130px">
            <col style="width:100px">
            <col style="width:70px">
            <col style="width:370px">
        </colgroup>
        <thead>
            <tr class="even">
                <th>参数</th>
                <th>数据类型</th>
                <th>默认值</th>
                <th>说明</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><b class="name">scrollObj</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">.lin_scrollObj</span></td>
                <td class="t_l">
                    <p>滚动对象的类名或者ID</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">navObj</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">lin_navObj</span></td>
                <td class="t_l">
                    <p>控制导航的类名</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">haveNav</b></td>
                <td><span class="type">Boolean</span></td>
                <td><span class="normal">false</span></td>
                <td class="t_l">
                    <p>是否带有控制导航</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">currentClass</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">current</span></td>
                <td class="t_l">
                    <p>当前状态的类名</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">btnPre</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">''</span></td>
                <td class="t_l">
                    <p>前一张按钮样式</p>
                    <p>格式:.lin_btnPre</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">btnNext</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">''</span></td>
                <td class="t_l">
                    <p>下一张按钮样式</p>
                    <p>格式:.lin_btnNext</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">autoPlay</b></td>
                <td><span class="type">Boolean</span></td>
                <td><span class="normal">true</span></td>
                <td class="t_l">
                    <p>是否自动播放</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">speed</b></td>
                <td><span class="type">int</span></td>
                <td><span class="normal">750</span></td>
                <td class="t_l">
                    <p>动画播放速度</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">autoPlayTimer</b></td>
                <td><span class="type">int</span></td>
                <td><span class="normal">3000</span></td>
                <td class="t_l">
                    <p>自动播放间隔时间</p>
                </td>
            </tr>
            <tr class="even">
                <td><b class="name">effect</b></td>
                <td><span class="type">String</span></td>
                <td><span class="normal">scrollX</span></td>
                <td class="t_l">
                    <p>动画类型</p>
                    <p><b>scrollX</b> 水平</p>
                    <p><b>scrollY</b> 垂直</p>
                    <p><b>fade</b> 渐变</p>
                </td>
            </tr>
            <tr>
                <td><b class="name">easing</b></td>
                <td><span class="type">int</span></td>
                <td><span class="normal">easeInOutExpo</span></td>
                <td class="t_l">
                    <p>附加动态效果</p>
                    <p>其他动画特效参考文件jquery.easing</p>
                </td>
            </tr>
        </tbody>
    </table>
    
    
    <div class="example_box">
        <h5>例子一：水平滚动</h5>
        <p>HTML</p>
        <div class="code_box">
        		<pre class="brush: csharp;"><div id="挂接对象ID" class="lin_imgAd">
<a href="javascript:void(0);" title="上一张" class="lin_btnPre"> < </a>
<a href="javascript:void(0);" title="下一张" class="lin_btnNext"> > </a>
<ul class="lin_scrollObj">
  <li><img src="css/a.gif"  alt="图片一"/></li>
  <li><img src="css/b.gif"  alt="图片一"/></li>
  <li><img src="css/a.gif"  alt="图片一"/></li>
  <li><img src="css/b.gif"  alt="图片一"/></li>
  <li><img src="css/a.gif"  alt="图片一"/></li>
</ul>
</div></pre>
        </div>
		<p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">.lin_imgAd{width:200px; height:125px; overflow:hidden; margin:0px auto; position:relative;}
.lin_scrollObj{position:absolute; left:0px; top:0px; z-index:1;}
.lin_scrollObj li{float:left; height:125px;width:200px;}
.lin_navObj{position:absolute; z-index:2; bottom:10px;}
.lin_navObj li{background-color: #FFFFFF;border: 1px solid #CCCCCC;color: #999999;display: inline;float: left;line-height: 21px;padding: 0 5px;float:left; margin-right:2px; display:inline;}
.lin_navObj li.current{border-color:#ff8900; color:#ff8900;}
.lin_btnPre,.lin_btnNext{position:absolute; z-index:2; background-color:#EEE; padding:5px; color:#666666; top:45px;}
.lin_btnNext{right:1px;}.lin_btnPre{left:1px;}</pre>
        </div>        
		<p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$("#demo1").lin_picSwitch({btnPre:".lin_btnPre",btnNext:".lin_btnNext"});</pre>
        </div>        
        
        <div class="demo_box">
            
            <div id="demo1" class="lin_imgAd">
            	<a href="javascript:void(0);" title="上一张" class="lin_btnPre"> < </a>
                <a href="javascript:void(0);" title="下一张" class="lin_btnNext"> > </a>
            	<ul class="lin_scrollObj">
                	<li><img src="css/a.gif"  alt="图片一"/></li>
                    <li><img src="css/b.gif"  alt="图片一"/></li>
                    <li><img src="css/a.gif"  alt="图片一"/></li>
                    <li><img src="css/b.gif"  alt="图片一"/></li>
                    <li><img src="css/a.gif"  alt="图片一"/></li>
                </ul>
            </div>
            
        </div>
        
    </div>
    
    
    <div class="example_box">
        <h5>例子二：垂直滚动</h5>
		<p>HTML</p>
        <div class="code_box">
        		<pre class="brush: csharp;"><div id="挂接对象ID" class="lin_imgAd lin_imgAd_2">
	<ul class="lin_scrollObj">
     <li><img src="css/a.gif"  alt="图片一"/></li>
     <li><img src="css/b.gif"  alt="图片一"/></li>
     <li><img src="css/a.gif"  alt="图片一"/></li>
     <li><img src="css/b.gif"  alt="图片一"/></li>
     <li><img src="css/a.gif"  alt="图片一"/></li>
     </ul>
</div>
            </pre>
        </div>        
		<p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">.lin_imgAd{width:200px; height:125px; overflow:hidden; margin:0px auto; position:relative;}
.lin_scrollObj{position:absolute; left:0px; top:0px; z-index:1;}
.lin_scrollObj li{float:left; height:125px;width:200px;}
.lin_navObj{position:absolute; z-index:2; bottom:10px;}
.lin_navObj li{background-color: #FFFFFF;border: 1px solid #CCCCCC;color: #999999;display: inline;float: left;line-height: 21px;padding: 0 5px;float:left; margin-right:2px; display:inline;}
.lin_navObj li.current{border-color:#ff8900; color:#ff8900;}
.lin_btnPre,.lin_btnNext{position:absolute; z-index:2; background-color:#EEE; padding:5px; color:#666666; top:45px;}
.lin_btnNext{right:1px;}.lin_btnPre{left:1px;}
.lin_imgAd_2 .lin_scrollObj li{clear:both;}</pre>
        </div>        
		<p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$("#demo2").lin_picSwitch({effect:'scrollY',autoPlayTimer:5000});</pre>
        </div>        
        
        <div class="demo_box">
            
            <div id="demo2" class="lin_imgAd lin_imgAd_2">
            	<ul class="lin_scrollObj">
                	<li><img src="css/a.gif"  alt="图片一"/></li>
                    <li><img src="css/b.gif"  alt="图片一"/></li>
                    <li><img src="css/a.gif"  alt="图片一"/></li>
                    <li><img src="css/b.gif"  alt="图片一"/></li>
                    <li><img src="css/a.gif"  alt="图片一"/></li>
                </ul>
            </div>
            
        </div>
        
    </div>
    
    
    <div class="example_box">
        <h5>例子三：渐隐渐出</h5>
<p>HTML</p>
        <div class="code_box">
        		<pre class="brush: csharp;"><div id="挂接对象ID" class="lin_imgAd lin_imgAd_3">
	<ul class="lin_scrollObj">
     <li><img src="css/a.gif"  alt="图片一"/></li>
     <li><img src="css/b.gif"  alt="图片一"/></li>
     <li><img src="css/a.gif"  alt="图片一"/></li>
     <li><img src="css/b.gif"  alt="图片一"/></li>
     <li><img src="css/a.gif"  alt="图片一"/></li>
     </ul>
</div>
            </pre>
        </div>        
		<p>CSS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">.lin_imgAd{width:200px; height:125px; overflow:hidden; margin:0px auto; position:relative;}
.lin_scrollObj{position:absolute; left:0px; top:0px; z-index:1;}
.lin_scrollObj li{float:left; height:125px;width:200px;}
.lin_navObj{position:absolute; z-index:2; bottom:10px;}
.lin_navObj li{background-color: #FFFFFF;border: 1px solid #CCCCCC;color: #999999;display: inline;float: left;line-height: 21px;padding: 0 5px;float:left; margin-right:2px; display:inline;}
.lin_navObj li.current{border-color:#ff8900; color:#ff8900;}
.lin_btnPre,.lin_btnNext{position:absolute; z-index:2; background-color:#EEE; padding:5px; color:#666666; top:45px;}
.lin_btnNext{right:1px;}.lin_btnPre{left:1px;}
.lin_imgAd_3 .lin_scrollObj li{ position:absolute; left:0px; top:0px; }	</pre>
        </div>        
		<p>JS</p>    
        <div class="code_box">
        		<pre class="brush: csharp;">$("#demo3").lin_picSwitch({effect:'fade',autoPlayTimer:6000});</pre>
        </div>        
        
        <div class="demo_box">
            
            <div id="demo3" class="lin_imgAd lin_imgAd_3">
            	<ul class="lin_scrollObj">
                	<li><img src="css/a.gif"  alt="图片一"/></li>
                    <li><img src="css/b.gif"  alt="图片一"/></li>
                    <li><img src="css/a.gif"  alt="图片一"/></li>
                    <li><img src="css/b.gif"  alt="图片一"/></li>
                    <li><img src="css/a.gif"  alt="图片一"/></li>
                </ul>
            </div>
            
        </div>
        
    </div>
    
    
    <div class="download">
        <h3>立即下载</h3>
        <div class="download_box">
            <a href="#" target="_blank" class="btn_download btn_download_wide">
                <span class="icon_box"><s class="icon_download"></s></span>
                <span class="title">lin_picSwitch</span>
                <span class="version">version : 1.0</span>
            </a>
        </div>
    </div>
    
    <div class="download">
        <h3>联系我</h3>
        <div class="download_box">
           <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=317365887&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:317365887:53" alt="请注明通过林氏智造发现此QQ" title="请注明通过林氏智造发现此QQ"/></a>
        </div>
    </div>
			
			
		</div>
		
	</body>
</html>
